<template>
    <div :class="[isname == 'extercss' ? 'page-table-1' : 'page-table']">
        <!-- 显示表格 -->
        <!-- 之前表格的刷新 -->
        <!-- v-loading="$store.state.app.loading" -->
        <el-table ref="table" :max-height="maxHeight" :header-cell-style="{
            background: '#eef1f6',
            color: '#666',
            fontSize: '12px',
        }" :height="pageParm.tableHeight || undefined" :data="data" @row-dblclick="handleRowDbclick"
            @row-click="handleRowClick" :default-expand-all="false" :row-key="keys" :row-class-name="tableRowClassName"
            :default-sort="pageParm.sort" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            style="width: 100%" @cell-click="cellClick" @sort-change="sortthiscolumn" :show-summary="showSummary"
            :summary-method="getSummaries" :show-header="showHeader" @select-all="handleSelectionChange"
            @selection-change="handleSelectionChange" @cell-mouse-enter="cellEnter" @cell-mouse-leave="cellLeave">
            <template slot="empty">
                <p>{{ dataText }}</p>
            </template>
            <el-table-column v-if="checkBox" :key="'selection'" :selectable="selectInit" type="selection" width="55"
                :fixed="true" />
            <el-table-column v-if="tabIndex" :key="'index'" align="center" label="序号"
                :width="fieldList.length === 0 ? '' : 50" :fixed="fixed">
                <template v-slot="scope">
                    <span v-if="pager">
                        {{
                            scope.$index +
                            1 +
                            (pageParm.query.page - 1) * pageParm.query.limit
                        }}
                    </span>
                    <span v-else>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="tabIndex2" align="center" label="序号" type="selection"
                :width="fieldList.length === 0 ? '' : 50">
                <template #default="{ row, $index }" :fixed="fixed">
                    <div v-if="columnCheckedId == row.id || row.checked" @click.stop>
                        <el-checkbox v-model="row.checked" @change="cellCheckbox(row, $index)"></el-checkbox>
                    </div>
                    <span v-else>{{ $index + 1 }}</span>
                </template>
            </el-table-column>

            <el-table-column v-for="(item, index) in fieldList.filter((item) => !item.hidden)" :key="index"
                :sortable="item.sortable" :prop="item.value" :label="item.label" :fixed="item.fixed" :type="item.expand"
                align="center" :formatter="item.formatter" :width="item.width" :min-width="item.minWidth || '100px'">
                <template slot="header" v-if="item.type === 'checkbox' && showRow != 'paymentApplication'">
                    <el-checkbox v-model="allCheck_" @change="changeAllCheckEffect()">—</el-checkbox>
                </template>
                <template v-slot="scope">
                    <template v-if="item.type === 'checkbox'">
                        <el-checkbox v-model="scope.row.checked" @change="changeCheckEffect(scope.row)">
                        </el-checkbox>
                    </template>
                    <!-- solt 自定义列-->
                    <template v-if="item.type === 'slot'">
                        <slot :name="'col-' + item.value" :row="scope.row" :index="scope.$index" />
                    </template>
                    <!-- 嵌套表格 -->
                    <template v-else-if="item.children">
                        <el-table-column v-for="(childItem, childIndex) in item.children" :key="childIndex"
                            :prop="childItem.value" :label="childItem.label" align="center" :width="item.width"
                            :min-width="item.minWidth || '85px'" />
                    </template>
                    <!-- 标签 -->
                    <el-tag v-else-if="item.type === 'tag'">{{
                        scope.row[item.value]
                    }}</el-tag>
                    <!-- 图片    v-imgAlart -->
                    <template v-else-if="item.type === 'image' && scope.row[item.value]">
                        <el-popover placement="top-start" title trigger="hover">
                            <img :src="scope.row[item.value]" alt class="_small_img" />
                            <el-image slot="reference" class="_big_img_sort" :src="scope.row[item.value]"
                                fit="scale-down"></el-image>
                        </el-popover>
                    </template>
                    <span v-else-if="item.type === 'time' && scope.row[item.value]">{{
                        scope.row[item.value] | formatter
                    }}</span>
                    <span v-else-if="item.type === 'label_month' && scope.row[item.value]">{{ scope.row[item.value]
                        }}<span v-if="scope.row[item.value] > 0">月</span></span>
                    <!-- <img
                        v-else-if="
                            item.type === 'image' && scope.row[item.value]
                        "

                        height="50px"
                        :src="scope.row[item.value]"
                    />-->
                    <template v-else-if="item.type === 'popover'">
                        <el-popover v-if="scope.row[item.value] !== '' && scope.row[item.value] !== null
                        " placement="top-start" title="" width="300" trigger="hover" :content="scope.row[item.value]">
                            <span slot="reference" class="pop_hidden" :style="`width:${item.width}|| 100px`">{{
                                scope.row[item.value]
                            }}</span>
                        </el-popover>
                        <span v-else> - </span>
                    </template>
                    <template v-else-if="item.type === 'link' &&
                        scope.row[item.value] !== '' &&
                        scope.row[item.value] - 0 !== 0
                    ">
                        <el-link type="primary" style="font-size: 12px">
                            {{ scope.row[item.value] }}
                        </el-link>
                    </template>
                    <!-- 其他 -->
                    <template v-else>
                        {{
                            getDataName({
                                dataList: listTypeInfo[item.list],
                                value: "value",
                                label: "key",
                                data: scope.row[item.value],
                            }) || "-"
                        }}
                    </template>
                </template>
            </el-table-column>
            <el-table-column v-if="handle && !showselect" :key="'handle'" :fixed="handle.fixed" align="center"
                :label="handle.label" :width="handle.width">
                <template v-slot="scope">
                    <el-button-group>
                        <template v-for="(item, index) in handle.btList">
                            <!-- 自定义操作类型 -->
                            <slot v-if="item.slot" :name="'bt-' + item.event"
                                :data="{ item, row: scope.row, $index: scope.$index }" />
                            <!-- 操作按钮 -->
                            <el-button v-if="!item.slot &&
                                item.show &&
                                (!item.ifRender || item.ifRender(scope.row))
                            " :key="index" size="mini" :class="item.event + '-button'" :type="item.type"
                                :icon="item.icon" :disabled="item.disabled" :loading="scope.row[item.loading]"
                                @click.stop="handleClick(item.event, scope.row, scope.$index)">{{ item.label
                                }}</el-button>
                            <el-switch v-if="item.switch && scope.row.status != 0" class="switchStyle"
                                v-model="scope.row.is_enable" active-text="启用" inactive-text="停用"
                                @change="handleClick(item.event, scope.row)">
                            </el-switch>
                        </template>
                    </el-button-group>
                </template>
            </el-table-column>
            <!-- 车辆信息 类似于select -->
            <el-table-column v-if="showselect" align="center" fixed="right" label="操作" width="150px">
                <template v-slot="scope">
                    <div style="width: 100px;margin-right: 20px;">
                        <span @click="handleClick('info', scope.row)" class="infoselect">查看信息</span>
                        <el-select v-model="selectvalue" placeholder="" class="selectchoose" @change="choosevalue">
                            <el-option style="color: #409eff"
                                v-if="item.show && (!item.ifRender || item.ifRender(scope.row))"
                                v-for="(item, index) in scope.row.handlelist" :key="index" :lable="item.label"
                                :value="item.label" @click.native="handleClick(item.event, scope.row)"></el-option>
                        </el-select>
                    </div>
                    <div>
                        <span @click="handleClick('un_enable', scope.row)" class="otherinfo"
                            v-if="scope.row.status == 0">禁用</span>
                        <span @click="handleClick('enable', scope.row)" class="otherinfo" v-else>启用</span>
                    </div>


                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <template v-if="pager">
            <div v-show="!$store.state.app.loading" class="pagination-container">
                <el-pagination background :current-page.sync="pageParm.query.page" :page-sizes="pageParm.pagesizes"
                    :page-size="pageParm.query.limit" layout="total, sizes, prev, pager, next, jumper, slot"
                    :total="pageParm.total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    <el-button type="primary" class="btns"
                        @click="handleCurrentChange(pageParm.query.curPage)">前往</el-button>
                </el-pagination>
            </div>
        </template>
    </div>
</template>

<script>
import { formatter } from "@/utils/index";
export default {
    name: "PageTable",
    props: {
        allCheck: {
            type: Boolean,
            default: false,
        },
        // 自定义类名
        className: {
            type: String,
        },
        isname: {
            type: String,
        },
        keys: {
            type: String,
            default: "id",
        },
        showSummary: {
            type: Boolean,
            default: false,
        },
        showHeader: {
            type: Boolean,
            default: true,
        },
        // expandRowKeys:{
        //   type: Array,
        // },
        getSummaries: {
            type: Function,
            default: function () {
                return [];
            },
        },
        // sortthiscolumn :{
        //   type:Function,
        //   default:function(){
        //     return []
        //   }
        // },
        sort: {
            type: Object,
        },
        // 刷新
        refresh: {
            type: Number,
        },
        // 获取数据的接口
        api: {
            type: Function,
        },
        // 是否显示序号
        tabIndex: {
            type: Boolean,
            default: true,
        },
        tabIndex2: {
            type: Boolean,
            default: false,
        },
        // 是否固定数字列
        fixed: {
            type: Boolean,
            default: true,
        },
        //data为空时显示
        dataText: {
            type: String,
            default: "",
        },
        // 是否有选择框
        checkBox: {
            type: Boolean,
            default: false,
        },
        // 选中列表
        checkedList: {
            type: Array,
            default: () => {
                return [];
            },
        },
        // 类型列表
        listTypeInfo: {
            type: Object,
        },
        // 表格字段配置
        fieldList: {
            type: Array,
            default: () => {
                return [];
            },
        },
        // 操作栏配置
        handle: {
            type: Object,
        },
        //操作栏 select
        showselect: {
            type: Boolean,
            default: false,
        },
        // 是否分页
        pager: {
            type: Boolean,
            default: true,
        },
        // 分页参数
        pageParm: {
            type: Object,
            default: () => {
                return {
                    tableHeight: 0, // 表格最大高度
                    total: 0, // 总条数
                    loading: true, // 加载动画
                    // pagesizes: [5, 10, 20, 50, 100], // 分页数量列表
                    query: {
                        // 查询条件
                        page: 1, // 当前页
                        limit: 10, // 每页条数
                    },
                };
            },
        },
        // 重置当前页
        initCurpage: {
            type: Number,
        },
        // 查询条件
        query: {
            type: Object,
            default: () => {
                return {};
            },
        },
        // 列表数据
        data: {
            type: Array,
        },
        // 监听高度
        listenHeight: {
            type: Boolean,
            default: false,
        },
        showRow: {
            type: String,
        },
        loading: {
            type: Boolean,
            default: true,
        },
        maxHeight: {
            type: String || Number,
            default: null,
        },
    },
    data () {
        return {
            allCheck_: this.allCheck,
            expandRowKeys: [36],
            selectvalue: "",
            columnCheckedId: '',
            tableData: [], //table数据
            multipleSelection: [], //table多选数据
            checkedLists: [], //table多选选中数据
            // 列表相关
            // pageParm: {
            //     tableHeight: 0, // 表格最大高度
            //     total: 0, // 总条数
            //     loading: false, // 加载动画
            //     pagesizes: [5, 10, 20, 50, 100], // 分页数量列表
            //     query: {
            //         // 查询条件
            //         curPage: 1, // 当前页
            //         limit: 10 // 每页条数
            //     }
            // }
        };
    },
    created () {
        // this.getList(this.api)
    },
    filters: {
        formatter (time) {
            let date = new Date(time);
            return formatter(date, "yyyy-MM-dd");
        },
    },
    computed: {
        // ...mapGetters(['fullScreen'])
    },
    watch: {
        allCheck (newVal) {
            this.allCheck_ = newVal;
        },
        initCurpage () {
            // this.pageParm.query.page = 1
        },
        refresh () {
            // if (!this.api) return
            // this.getList(this.api)
        },
        fullScreen () {
            if (this.listenHeight) {
                // 得到表格的高度
                this.pageParm.tableHeight = this.getTableHeight();
            }
        },
    },
    mounted () {
        if (this.listenHeight) {
            // 得到表格的高度
            this.pageParm.tableHeight = this.getTableHeight();
            // 监听页面大小改变
            window.addEventListener("resize", () => {
                // 得到表格的高度
                this.pageParm.tableHeight = this.getTableHeight();
            });
        }
    },
    methods: {
        changeAllCheckEffect () {
            console.log(this.allCheck);
            this.$emit("handleEvent", "allCheck", this.allCheck_);
        },
        changeCheckEffect (row) {
            console.log(row);
            this.$emit("handleEvent", "check", row);
        },
        choosevalue () {
            this.selectvalue = "";
        },
        sortthiscolumn (column) {
            this.$emit("handleEvent", "sortthiscolumn", column);
        },
        //列表单选按钮是否可选设置
        selectInit (rows) {
            if (this.showRow == "ownerOthers") {
                if (rows.source_id == 0 && rows.status == 0) {
                    return true
                } else {
                    return false
                }
            }
            if (this.showRow == "paymentapply") {
                if (rows.invoice_status == 0 ) {
                    if (rows.tax_ratio == 0 && rows.amount_type == 0) {
                        return false;
                    }else{
                        return true;
                    }
                    
                } else {
                    return false;
                }
            }
            if (this.showRow == "invoice") {
                if (rows.file.length > 0) {
                    return true;
                } else {
                    return false;
                }
            }
            if (this.showRow == "billPage") {
                if (rows.bill_status == 10) {
                    return true;
                } else {
                    return false;
                }
            }
            if (this.showRow == "receivePage") {
                if (rows.pay_status == 0) {
                    return true;
                } else {
                    return false;
                }
            }
            if (
                this.showRow == "billmatch_left" ||
                this.showRow == "billmatch_right"
            ) {
                if (rows.is_empty == 1) {
                    return false;
                } else {
                    return true;
                }
            }

            if (this.showRow == "recharge") {
                if (
                    rows.status == 20 ||
                    rows.status == 21 ||
                    rows.status == 30 ||
                    rows.status == 40
                ) {
                    return true;
                } else {
                    return false;
                }
            }

            if (this.showRow == "driverCompany") {
                return true;
            }
            if (this.showRow == "airForce") {
                return true;
            }
            if (this.showRow == "checkYard") {
                return true;
            }

            if (
                (this.showRow == "carcareInfo" && rows.status == 20) ||
                (this.showRow == "carcareInfo" &&
                    rows.status == 30 &&
                    rows.settlement_time == "")
            ) {
                return true;
            }

            if (
                this.showRow == "carexamInfo" &&
                rows.status == 5 &&
                rows.settlement_time_txt != ""
            ) {
                return false;
            }
            //运费月度 司机工资 禁选项
            if (rows.pay_status == 20 && rows.freight_settlement_time !== 0) {
                return false; //不可勾选
            }
            if (this.showRow == "study") {
                return true;
            }
            // if (this.showRow == "carMonthChecking") {
            //   if (rows.status != 10) {
            //     return false;
            //   } else {
            //     return true;
            //   }
            // }
            if (
                (rows.pay_status == 20 && rows.freight_settlement_time !== 0) ||
                rows.station_check_status == 20 ||
                (rows.status == 20 && this.showRow == "checkde") ||
                rows.is_fleet_check === 1 ||
                (rows.status_txt === "已结账" && this.showRow !== "maintenanceInfo") ||
                (rows.settlement_time !== 0 &&
                    ((rows.status >= 30 &&
                        rows.status_txt !== "确认结账" &&
                        this.showRow !== "maintenanceInfo") ||
                        (rows.status == 40 && this.showRow !== "maintenanceInfo"))) ||
                (rows.settlement_time !== 0 &&
                    rows.status == 0 &&
                    rows.expenses_name) ||
                (rows.status == 50 &&
                    this.showRow == "maintenanceInfo" &&
                    rows.settlement_time !== 0) ||
                (this.showRow == "driverworkfullInfo" && rows.settlement_time)
                //  ||
                // (this.showRow == "receivableVerification" && rows.audit_status == 1) ||
                // (this.showRow == "accountsVerification" && rows.audit_status == 1)
            ) {
                return false;
            } else {
                return true;
            }
        },
        //   getSummaries(param) {
        //     this.$emit("handleEvent", "total", param);
        //     const { columns, data } = param;
        //     const sums = [];
        //     columns.forEach((column, index) => {
        //       if (index === 0) {
        //         sums[index] = '总价';
        //         return;
        //       }
        //       const values = data.map(item => Number(item[column.property]));
        //       if (!values.every(value => isNaN(value))) {
        //         sums[index] = values.reduce((prev, curr) => {
        //           const value = Number(curr);
        //           if (!isNaN(value)) {
        //             return prev + curr;
        //           } else {
        //             return prev;
        //           }
        //         }, 0);
        //         sums[index] += ' 元';
        //       } else {
        //         sums[index] = 'N/A';
        //       }
        //     });

        //     return sums;
        //   },
        tableRowClassName ({ row, rowIndex }) {
            console.log("------->row", this.showRow);

            if (
                row.checked == true &&
                row.status !== 30 &&
                row.status !== 20 &&
                row.is_fleet_check === 0
            ) {
                return "blue-row";
            }
            switch (this.showRow) {
                case "customerManage":
                    if (row.expiration_status == 1) {
                        return "red-color";
                    } else if (row.expiration_status == 2) {
                        return "yellow-color";
                    } else if (row.expiration_status == 3) {
                        return "";
                    }
                    break;
                case "outputInvoice":
                    if (row.offset_status == 2 || row.offset_status == 3) {
                        return "nine-color";
                    }
                    break;
                case "bdsSpotCheckList":
                    if (row.against_law_status != 0 && row.against_law_status != 15) {
                        return "red-color";
                    }
                    break;
                case "fundCashFlow":
                    if (row.type_value == 0) {
                        return "fundCashFlowRow";
                    }
                    break;
                case "freightWithdraw":
                    if (row.withdrawal_status == 20) {
                        return "red-color";
                    }
                    if (row.withdrawal_status == 30) {
                        return "yellow-color";
                    }
                    if (row.withdrawal_status == 40) {
                        return "nine-color";
                    }

                    break;
                case "hedgReconciliation":
                    if (row.collection_status == 0) {
                        return "red-color";
                    }
                    if (row.collection_status == 1) {
                        return "nine-color";
                    }
                    break;

                case "expirationReminder":
                    if (row.status == 1) {
                        return "red-color";
                    }
                    if (row.status == 2) {
                        return "yellow-color";
                    }
                    if (row.status == 3) {
                        return "green-color";
                    }
                    break;

                case "reimbursement":
                    if (row.pay_status_text == "已支付") {
                        return "gray-row";
                    }
                    break;
                case "paymentApplyFor":
                    if (row.pay_status_text == "已支付") {
                        return "gray-row";
                    }
                    if (row.exigency == 1) {
                        return "red-color";
                    }

                    break;
                case "clientInfo":
                    if (row.audit_status == 20) {
                        return "red-color";
                    }
                    break;
                case "billmatch_left":
                    break;
                case "billmatch_right":
                    if (row.is_empty == 1) {
                        return "nine-color";
                    }

                    break;
                case "safetySystem":
                    if (row.perfection_status_num == 0) {
                        return "nine-color";
                    }

                    break;
                case "driver_list":
                    if (row.pass_state == 20) {
                        return "red-color";
                    }
                    if (row.is_bind == 0) {
                        return "nine-color";
                    }

                    break;
                case "prejob":
                    if (row.is_check == 0) {
                        return "nine-color";
                    }

                    break;
                case "gasStationList":
                    if (row.status == 40) {
                        return "nine-color";
                    }
                    break;
                case "mgs_list1":
                    if (row.is_read == 1) {
                        return "nine-color";
                    }

                    break;
                case "recharge":
                    if (row.status >= 30 && row.settlement_time != 0) {
                        return "nine-row";
                    }

                    break;
                case "monthlyFeeItem":
                case "driverCompanyItem":
                    return "nine-row";
                    break;
                case "infoCarHead":
                    if (row.audit_status == 20) {
                        return "red-color";
                    }
                    if (row.is_scrap == 1) {
                        return "nine-color";
                    }
                    if (row.is_enable == 0) {
                        return "yellow-color";
                    }
                    break;
                case "infoCarTrailer":
                    if (row.audit_status == 20) {
                        return "red-color";
                    }
                    if (row.is_enable == 0) {
                        return "yellow-color";
                    }
                    if (row.is_scrap == 1) {
                        return "nine-color";
                    }
                    break;
                case "salesmanActualReceivable":
                    if (row.is_lock_salary == 1) {
                        return "nine-color";
                    }
                    break;
                case "salesmanActualReceivable_":
                    if (row.is_lock_salary == 1) {
                        return "nine-color";
                    }
                    break;
                case "prejobtrainingSet":
                    if (!row.is_check) {
                        return "nine-color";
                    }

                    break;
                case "auditlist":
                    if (row.is_due_time == "到期") {
                        return "red-color";
                    } else if (row.is_due_time == "即将到期") {
                        return "yellow-color";
                    } else {
                        return "green-color";
                    }
                    break;
                case "jobDetails": //杂作业任务明细
                    row.rowIndex = rowIndex;
                    if (row.is_fleet_check === 1) {
                        if (row.is_repeat === 0) {
                            return "green-row";
                        } else {
                            return "green-row red-color";
                        }
                    } else {
                        if (row.is_repeat === 0) {
                            return "";
                        } else {
                            return "red-color";
                        }
                    }
                    break;
                case "airForce": //杂作业场站核对
                    if (row.station_check_status === 20) {
                        //已结算
                        return "gray-row";
                    } else {
                        if (row.row_types === 1 || row.row_types === 2) {
                            return "red-color";
                        } else if (row.row_types === 3) {
                            return "green-row";
                        } else {
                            return "";
                        }
                    }
                    break;
                case "checkYard":
                    if (row.status >= 20) {
                        return "gray-row";
                    } else {
                        return "";
                    }
                    break;
                case "checkTeam":
                    if (row.is_error === 1) {
                        return "yellow-color";
                    } else if (row.is_error === 2) {
                        return "red-color";
                    } else {
                        return "";
                    }
                    break;
                case "exteriorDetail":
                    if (row.is_lock == 1) {
                        return "nine-color";
                    }
                    if (row.task_status == 1) {
                        return "yellow-color";
                    }
                    break;
                case "clientInfo":
                    if (row.is_activation == 1) {
                        return "nine-color";
                    }
                    break;
                case "factoryInfo":
                    if (row.is_activation == 1) {
                        return "nine-color";
                    }
                    break;
                case "undertakerInfo":
                    if (row.is_activation == 1) {
                        return "nine-color";
                    }
                    break;
                case "receivableVerification":
                    if (row.source == 1) {
                        return "blue-color_";
                    } else {
                        if (row.collection_status == 0 && row.audit_status == 0) {
                            return "red-color";
                        } else if (row.collection_status == 1 && row.audit_status == 0) {
                            return "";
                        } else if (row.collection_status == 1 && row.audit_status == 1) {
                            return "green-color";
                        }
                    }
                    break;
                case "accountsVerification":
                    if (row.source == 1) {
                        return "blue-color_";
                    } else {
                        if (row.collection_status == 0 && row.audit_status == 0) {
                            return "red-color";
                        } else if (row.collection_status == 1 && row.audit_status == 0) {
                            return "";
                        } else if (row.collection_status == 1 && row.audit_status == 1) {
                            return "green-color";
                        }
                    }
                    break;
                case "alreadyReceivable":
                    if (row.source == 1) {
                        return "blue-color_";
                    } else {
                        if (row.collection_status == 0 && row.audit_status == 0) {
                            return "red-color";
                        } else if (row.collection_status == 1 && row.audit_status == 0) {
                            return "";
                        } else if (row.collection_status == 1 && row.audit_status == 1) {
                            return "green-color";
                        }
                    }

                    break;
                case "alreadyAccounts":
                    if (row.source == 1) {
                        return "blue-color_";
                    } else {
                        if (row.collection_status == 0 && row.audit_status == 0) {
                            return "red-color";
                        } else if (row.collection_status == 1 && row.audit_status == 0) {
                            return "";
                        } else if (row.collection_status == 1 && row.audit_status == 1) {
                            return "green-color";
                        }
                    }
                    break;
                case "receivable":
                    if (row.source == 1) {
                        return "blue-color_";
                    } else {
                        if (row.reconciliation_status == 0) {
                            return "red-color";
                        }
                        if (row.reconciliation_status == 1) {
                            return "yellow-color";
                        }
                        if (row.reconciliation_status == 2) {
                            return "nine-color";
                        }
                    }
                    break;
                case "accounts":
                    if (row.source == 1) {
                        return "blue-color_";
                    } else {
                        if (row.reconciliation_status == 0) {
                            return "red-color";
                        }
                        if (row.reconciliation_status == 1) {
                            return "yellow-color";
                        }
                        if (row.reconciliation_status == 2) {
                            return "nine-color";
                        }
                    }

                    break;
                case "carCareManage":
                    if (row.remind_type == 1) {
                        return "red-color";
                    } else if (row.remind_type == 2) {
                        return "yellow-color";
                    } else {
                        return "green-color";
                    }

                    break;
                case "staff":
                    if (row.is_job == 0) {
                        return "nine-color";
                    }

                    break;
                case "examInfo":
                    if (row.status == 1) {
                        return "green-color";
                    } else if (row.status == 2) {
                        return "yellow-color";
                    } else if (row.status == 3) {
                        return "red-color";
                    }

                    break;
                case "examManage":
                    if (row.show_color == 1) {
                        return "red-color";
                    } else if (row.show_color == 2) {
                        return "yellow-color";
                    } else if (row.show_color == 3) {
                        return "green-color";
                    }

                    break;
                default:
                    return "";
                    break;
            }
        },
        getDataName: (obj) => {
            let name = obj.data;
            if (Array.isArray(obj.dataList) && obj.dataList.length > 0) {
                for (let i = 0; i < obj.dataList.length; i++) {
                    if (obj.dataList[i][obj.value] === obj.data) {
                        name = obj.dataList[i][obj.label];
                    }
                }
            }
            return name;
        },
        // 处理参数
        handleParams () {
            const obj = {};
            for (const key in this.query) {
                if (this.query[key] || this.query[key] === 0) {
                    obj[key] = this.query[key];
                }
            }
            // 如果不需要分页，则无分页相关参数
            return this.pager ? { ...this.pageParm.query, ...obj } : obj;
        },
        // 得到数据
        getList (api) {
            this.pageParm.loading = true;
            return new Promise((resolve, reject) => {
                // 每次调用接口时都自动绑定最新的数据
                api(this.handleParams()).then((res) => {
                    this.pageParm.loading = false;
                    if (res.code == 1000) {
                        // 使外面可以访问到表格数据
                        const arr = Array.isArray(res.data.data)
                            ? res.data.data
                            : res.data.result;
                        this.$emit("update:data", arr);
                        if (this.pager) {
                            this.pageParm.total = res.data.total - 0;
                            this.pageParm.query.page = res.data.page - 0;
                            this.pageParm.query.limit = res.data.limit - 0;
                        }
                        // 设置当前选中项
                        // this.checkedList.forEach(selected => {
                        //     const row = arr.find(item => {
                        //         return item.id === selected
                        //     })
                        //     this.$nextTick(() => {
                        //         if (!row) return
                        //         this.$refs.table.toggleRowSelection(
                        //             row,
                        //             true
                        //         )
                        //     })
                        // })
                        resolve(res);
                        this.$emit("handleEvent", "list", arr);
                    }
                });
            });
        },
        handleSizeChange (val) {
            if (this.pageParm.name) {
                console.log(val, "触发1");
                if (this.pageParm.name == "courseware") {
                    // pageSize 改变时会触发	每页条数
                    this.$emit("handleEvent", "courseware_pageSize", val);
                    // const query = this.pageParm.query
                    // query.limit = val // 每页条数
                    // query.curPage = 1 // 每页条数切换，重置当前页
                    // this.getList(this.api)
                }
            } else {
                console.log(val, "触发1");
                // pageSize 改变时会触发	每页条数
                this.$emit("handleEvent", "pageSize", val);
                // const query = this.pageParm.query
                // query.limit = val // 每页条数
                // query.curPage = 1 // 每页条数切换，重置当前页
                // this.getList(this.api)
            }
        },
        //单选行
        cellClick (row, column, cell, event) {
            if (row.pay_status === 20 && row.freight_settlement_time !== 0)
                return false;
            if (!this.checkBox) return false;
            if (row.checked == undefined || !row.checked) {
                row.checked = true;
            } else {
                row.checked = false;
            }
            //点击操作栏 当前行不被选中
            if (column.label == "操作") {
                row.checked = false;
                this.$refs.table.toggleRowSelection(row, false);
            }
            //this.$emit("handleEvent", "lineRow", val);
        },
        handleCurrentChange (val) {
            if (this.pageParm.name) {
                console.log(this.pageParm.name);
                if (this.pageParm.name == "courseware") {
                    this.selectedIndex = val;
                    this.$emit("handleEvent", "courseware_curPage", val);
                    this.$nextTick(() => {
                        //切换分页后置顶
                        this.$refs.table.bodyWrapper.scrollTop = 0;
                    });
                }
            } else {
                this.selectedIndex = val;
                this.$emit("handleEvent", "curPage", val);
                this.$nextTick(() => {
                    //切换分页后置顶
                    this.$refs.table.bodyWrapper.scrollTop = 0;
                });
                // currentPage 改变时会触发 当前页
                // this.pageParm.query.curPage = val // 当前页
                // this.getList(this.api)
            }
        },
        // 派发按钮点击事件
        handleClick (event, data, index) {
            this.$emit("handleClick", event, data, index);
        },
        handleRowClick (rows, event, column) {
            this.$emit("handleEvent", "rowClick", rows, event, this.checkBox);
            console.log("---handleRowClick", rows);
            if (this.checkBox) {
                // || rows.status == 30|| rows.status_txt == '已拒绝' || rows.status_txt == '已驳回'
                if (
                    (rows.bill_status != 10 && this.showRow == "billPage") || 
                    (rows.pay_status != 0 && this.showRow == "receivePage") || 
                    (rows.invoice_status != 0 && this.showRow == 'paymentapply') || 
                    (rows.invoice_status == 0 && rows.tax_ratio ==0 && rows.amount_type == 0 && this.showRow == 'paymentapply')
                )
                    return false;
                //避免可点击的字段重复点击本行
                if (
                    event.property !== "car_owner_name" &&
                    event.property !== "car_number" &&
                    event.property !== "miscellaneous_work_task_price" &&
                    event.property !== "gather_and_distribut_port_task_price" &&
                    event.property !== "replace_pay_wage" &&
                    event.property !== "fuel" &&
                    event.property !== "maintenance" &&
                    event.property !== "loan" &&
                    event.property !== "total_other_expense" &&
                    event.property !== "driver_name" &&
                    event.label !== "操作" &&
                    event.property !== "bill_photo_1" &&
                    event.property !== "ticket_photo" &&
                    event.label !== "维修单" &&
                    event.label !== "维修前" &&
                    event.label !== "维修中" &&
                    event.label !== "维修后"
                ) {
                    this.$refs.table.toggleRowSelection(rows);
                }
            }
        },
        handleRowDbclick (rows, event, column) {
            this.$emit("handleEvent", "rowDbclick", rows, event, this.checkBox);
            console.log("---handleRowDbclick", rows);
        },
        // 选中数据
        handleSelectionChange (rows, event) {
            if (this.tabIndex2) {
                this.multipleSelection = rows
                const data = this.data;
                if (this.multipleSelection.length == data.length) {
                    this.multipleSelection.forEach((item, index) => {
                        this.checkedLists[index] = true;
                    })
                    this.$emit("handleEvent", "allCheck", true);
                }
                if (this.multipleSelection.length == 0) {
                    this.checkedLists = [];
                    this.$emit("handleEvent", "allCheck", false);
                }
                this.$emit('selectList', this.multipleSelection)
            } else {
                if (!this.checkBox) return false;
                const data = this.data;
                data.forEach((selected) => {
                    selected.checked = false;
                });
                this.$emit("update:data", data);
                rows.forEach((v) => {
                    v.checked = true;
                });
                this.$emit("handleEvent", "tableCheck", rows);
            }
        },
        // 根据页面的头部, 功能框, 分页组件等高度，计算出table的高度
        getTableHeight () {
            // 当表格存在的时候才执行操作
            if (document.getElementsByClassName("el-table").length === 0) {
                return;
            }
            const boxH = document.body.clientHeight;
            const navH = document.getElementsByClassName("navbar-container")[0]
                ? document.getElementsByClassName("navbar-container")[0].clientHeight
                : 0;
            const tagH = document.getElementsByClassName("tags-view-container")[0]
                ? document.getElementsByClassName("tags-view-container")[0].clientHeight
                : 0;
            const searchH = document.getElementsByClassName("page-filter")[0]
                ? document.getElementsByClassName("page-filter")[0].clientHeight
                : 0;
            const pagerH = document.getElementsByClassName(
                "pagination-container"
            )[0] || { clientHeight: 0 };
            const bottomH = pagerH.clientHeight
                ? pagerH.clientHeight + 40
                : pagerH.clientHeight - 35;
            const tab = document.getElementsByClassName("el-table")[0] || {
                offsetTop: 0,
            };
            const tabOffT = tab.offsetTop;
            // 表格的高度 = 视口高度 - 表格到头部导航的距离 - 头部导航的高度137 - 分页组件的高度100 - 分页组件
            document.getElementsByClassName("el-table")[0].style.height =
                boxH - tabOffT - navH - tagH - searchH - bottomH + "px";
            // console.log('表格最大高度为:' + (boxH - navH - tagH - searchH - bottomH))
            return boxH - navH - tagH - searchH - bottomH;
        },
        // handleSelectionChange(val) {
        //     this.multipleSelection = val
        //     if (this.multipleSelection.length == this.tableData.length) {
        //       this.multipleSelection.forEach((item, index) => {
        //         this.checkedLists[index] = true
        //       })
        //     }
        //     if (this.multipleSelection.length == 0) {
        //       this.checkedLists = []
        //     }
        //     this.$emit('selectList', this.multipleSelection)
        // },
        //鼠标移入表格当前行
        cellEnter (row, column, cell, event) {
            this.columnCheckedId = row.id
        },
        // 鼠标移出表格当前行
        cellLeave (row, column, cell, event) {
            this.columnCheckedId = ''
        },
        // 选中与否塞数据
        cellCheckbox (row, index) {
            if (row.checked) {
                this.$refs.table.toggleRowSelection(row, true)
            } else {
                this.$refs.table.toggleRowSelection(row, false)
            }
            this.$emit("handleEvent", "check", row);
        },
    },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table__fixed {
    height: 100% !important;
}

::v-deep .el-table__fixed-right,
.el-table__fixed-body-wrapper {
    height: 100% !important;
}

::v-deep .fundCashFlowRow {
    background-color: #f5f7fa !important;
}

::v-deep .fundCashFlowRow td .cell {
    color: #000;
    font-weight: bold;
}

::v-deep .el-button {
    color: #409eff;
}

// 自定义表格相关
.page-table-1 {
    .pagination-container {
        padding: 10px 0 0;
    }

    .btns {
        width: 60px;
        height: 30px;
        margin-left: 30px;
        background: #3b67c9ff !important;
        color: #fff !important;

        &:hover {
            background-color: #409eff !important;
            color: #fff !important;
        }
    }

    // 解决elementui el-table前边固定列会遮挡住滚动条 ，左右无法拖动。
    ::v-deep .el-table__body-wrapper {
        z-index: 2;
    }

    ::v-deep .el-table__body {
        // 使表格兼容safari，不错位
        width: 100%;
        table-layout: fixed !important;
    }

    ::v-deep .el-table__row {
        td {
            height: 35px;
            padding: 0 !important;
        }
    }

    ::v-deep .el-table__body .el-icon:before {
        content: "\e6d9";
    }

    // .el-table__body .el-icon-arrow-right:before {
    //   content: "\e6d9";
    // }

    ::v-deep //   .el-table__body

    //   .el-table__expand-icon--expanded
    //   .el-icon-arrow-right:before {
    //   content: "\e6d8" !important;
    // }
    .el-table__body .el-table__expand-icon--expanded .el-icon:before {
        content: "\e6d8" !important;
    }

    ::v-deep .el-table__body .el-table__expand-icon {
        margin-top: 5px;
    }

    ::v-deep .el-table__body .el-table__expand-icon>.el-icon {
        margin-left: -6px;
        color: #999999;
    }

    ::v-deep .el-table__body .el-table__expand-icon--expanded {
        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);
    }

    ::v-deep .el-table__body .el-table__expand-icon {
        border: 1px solid #e7e7e7;
        width: 20px;
        padding: 1px;
    }

    ::v-deep .el-table__fixed {
        height: 100% !important;
    }

    ::v-deep .selectchoose>.el-input>.el-input__inner {
        color: #409eff;
        border: 0;
        // width:30px;
        height: 35px;
        line-height: 35px;
        font-size: 12px;
        outline: none;
    }

    ::v-deep .selectchoose>.el-input>.el-input__suffix>.el-input__suffix-inner>.el-input__icon {
        height: 35px;
        line-height: 35px;
    }

    .infoselect {
        font-size: 12px;
        width: 60px;
        height: 35px;
        color: #409eff;
        display: inline-block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 15px;
        z-index: 999;
    }

    .infoselect:hover {
        cursor: pointer;
    }

    .otherinfo {
        font-size: 12px;
        width: 30px;
        height: 35px;
        color: #409eff;
        display: inline-block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 120px;
        z-index: 999;
    }
}

.page-table {
    .pagination-container {
        padding: 10px 0 0;
    }

    .btns {
        width: 60px;
        height: 30px;
        margin-left: 30px;
        // #3b67c9ff
        background: #1890FF !important;
        color: #fff !important;

        &:hover {
            background-color: #409eff !important;
            color: #fff !important;
        }
    }

    // 解决elementui el-table前边固定列会遮挡住滚动条 ，左右无法拖动。
    ::v-deep .el-table__body-wrapper {
        z-index: 2;
    }

    ::v-deep .el-table__body {
        // 使表格兼容safari，不错位
        width: 100%;
        table-layout: fixed !important;
    }

    ::v-deep .el-table__row {
        td {
            height: 30px;
            padding: 0 !important;
        }
    }

    ::v-deep .el-table__body .el-icon:before {
        content: "\e6d9";
    }

    // .el-table__body .el-icon-arrow-right:before {
    //   content: "\e6d9";
    // }

    ::v-deep //   .el-table__body

    //   .el-table__expand-icon--expanded
    //   .el-icon-arrow-right:before {
    //   content: "\e6d8" !important;
    // }
    .el-table__body .el-table__expand-icon--expanded .el-icon:before {
        content: "\e6d8" !important;
    }

    ::v-deep .el-table__body .el-table__expand-icon {
        margin-top: 5px;
    }

    ::v-deep .el-table__body .el-table__expand-icon>.el-icon {
        margin-left: -6px;
        color: #999999;
    }

    ::v-deep .el-table__body .el-table__expand-icon--expanded {
        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);
    }

    ::v-deep .el-table__body .el-table__expand-icon {
        border: 1px solid #e7e7e7;
        width: 20px;
        padding: 1px;
    }

    ::v-deep .el-table__fixed {
        height: 100% !important;
    }

    ::v-deep .selectchoose>.el-input>.el-input__inner {
        color: #409eff;
        border: 0;
        // width:30px;
        height: 35px;
        line-height: 35px;
        font-size: 12px;
        outline: none;
    }

    ::v-deep .selectchoose>.el-input>.el-input__suffix>.el-input__suffix-inner>.el-input__icon {
        height: 35px;
        line-height: 35px;
    }

    .infoselect {
        font-size: 12px;
        width: 60px;
        height: 35px;
        color: #409eff;
        display: inline-block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 15px;
        z-index: 999;
    }

    .infoselect:hover {
        cursor: pointer;
    }

    .otherinfo {
        font-size: 12px;
        width: 30px;
        height: 35px;
        color: #409eff;
        display: inline-block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 110px;
        z-index: 999;
    }
}
</style>
<style lang="scss">
.el-table .blue-row {
    background: #9de1f4 !important;
}

.el-table__body .blue-row.hover-row>td {
    background-color: #9de1f4 !important;
}

.el-table .green-row {
    background: #9ee3ab;
}

.el-table__body .green-row.hover-row>td {
    background-color: #9ee3ab !important;
}

.el-table .gray-row {
    background: #e8ecf0;
}

.el-table .nine-row {
    background: #f8f8f8;
}

.el-table .blue-color td {
    color: #9de1f4 !important;
}

.el-table .blue-color_ td {
    color: #3773ff !important;
}

.el-table .green-color td {
    // color: #9ee3ab !important;
    color: #44b721 !important;
}

.el-table .red-color td {
    color: red !important;
}

.el-table .yellow-color td {
    color: #e6a23c !important;
}

.el-table .nine-color td {
    color: #999 !important;
}

.el-table .yellow-color td {
    // color:#EDB736 !important;
    color: #ff7e00 !important;
}

.page-table {
    // .el-table__body tr.hover-row > td {
    //   background-color:#ddd !important;
    // }

    .el-table__body tr:hover>td {
        background-color: #ddd !important;
    }

    .el-table th.is-leaf {
        border-right: 1px solid #fff;
        //   font-size: 14px;
    }

    .el-table__body .cell {
        height: 35px;
        line-height: 35px;
        font-size: 12px !important;
        position: relative;
        padding: 0 5px !important;
    }

    .el-table__body .cell>p {
        display: inline;
    }

    .el-table__header {
        background: #f6f7fb;

        .cell {
            line-height: 35px;
            height: 35px;
        }
    }

    .el-table th {
        padding: 0;
        background: #eef1f6;
    }

    .el-table__row {
        td {
            color: #333;
            //   font-weight:bold;
        }
    }

    .el-table__footer-wrapper,
    .el-table__fixed-footer-wrapper {
        .cell {
            color: red !important;
            font-weight: bold;
            font-size: 12px !important;
        }

        td {
            padding: 6px 0px !important;
        }
    }
}

.page-table-1 {
    .el-table__body tr.hover-row>td {
        background-color: #ddd !important;
    }

    .el-table th.is-leaf {
        border-right: 1px solid #fff;
        //   font-size: 14px;
    }

    .el-table__body .cell {
        // height: 48px;
        font-size: 12px !important;
        // line-height: 48px;
        position: relative;
    }

    .el-table__body .cell>p {
        display: inline;
    }

    .el-table__header {
        background: #f6f7fb;

        .cell {
            line-height: 35px;
            height: 35px;
        }
    }

    .el-table th {
        padding: 0;
        background: #eef1f6;
    }

    .el-table__row {
        td {
            color: #333;
            //   font-weight:bold;
        }
    }

    .el-table__footer-wrapper,
    .el-table__fixed-footer-wrapper {
        .cell {
            font-size: 12px;
            color: red !important;
            font-weight: bold;
        }

        td {
            padding: 6px 0px !important;
        }
    }
}

.el-table__expanded-cell {
    padding: 20px 20px !important;
}
</style>
<style>
.switchStyle {
    margin-left: 10px;
}

.switchStyle .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
}

.switchStyle .el-switch__label--left {
    z-index: 9;
    left: 6px;
}

.switchStyle .el-switch__label--right {
    z-index: 9;
    left: -14px;
}

.switchStyle .el-switch__label.is-active {
    display: block;
}

.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
    width: 60px !important;
}
</style>
